<template>
	<section v-if="my!==null" style="height: 100%">
		<header class="header">
			<ul>
				<li @click="back">
					<i class="header_iocn iocn2"></i>
					<span>返回</span>
				</li>
				<li class="head_er_center">个人中心</li>
				<li> <!--<span v-if='ri==true'>分享</span> --> </li>
			</ul>
		</header>
		<section class="main">
			<!--<div class="portrait" :style="{background:'url('+(myInfo.Person && myInfo.Person.HeadUrl?myInfo.Person.HeadUrl:defaultHead)+') no-repeat center'}">
				<i @click="goSession()"><img :src="icon1"></i>
				<i v-if="my" @click="goLink('/personSetting')"><img :src="icon2"></i>
			</div>-->
      <div class="portrait">
        <mt-swipe v-if="myInfo.Person.HeadUrl" :auto="0" :show-indicators="false" :continuous="false" :speed="200">
            <mt-swipe-item v-for="item in myInfo.Person.HeadUrl" :key="item.id" class="swiper-list" :style="{background:'url('+ item +') no-repeat center'}"></mt-swipe-item>
        </mt-swipe>
        <div v-else class="default-pic" :style="{background:'url('+ defaultHead +')'}"></div>
        <i @click="goSession()"><img :src="icon1"></i>
				<i v-if="my" @click="goLink('/personSetting')"><img :src="icon2"></i>
      </div>
			<ul class="introduce">
				<li>
					<ul>
						<li>
							<span>{{myInfo.Person.Name?myInfo.Person.Name:'暂无昵称'}}</span>
							<span v-if="!my&&myInfo.Person.Locality">{{myInfo.Person.Locality}}</span>
						</li>
						<li class="sex-info">
							<span class="top_label sex">{{myInfo.Person.Sex&&myInfo.Person.Sex!=='Gender_Type_Unknown'?(myInfo.Person.Sex == "Gender_Type_Female"?'♀ ':'♂ '):''}}{{myInfo.Person.AgeGroup?myInfo.Person.AgeGroup:'未知'}}</span>
              <span v-if="myInfo.Person.Locality" class="top_label location">{{myInfo.Person.Locality}}</span>
						</li>
						<li v-if='!my&&myInfo.Type' class="shield">
							<span class="top_label focus" v-if="(myInfo.Type == 3 || myInfo.Type == 0)&&!isBlack" @click="toFocus()">关注{{myInfo.AttentionCount < 100 ? myInfo.AttentionCount : '99+'}}</span>
							<span class="top_label focus" v-else-if="!isBlack" @click="cancelFocus()">取消关注</span>
							<span v-if="isBlack!==null" class="top_label black" @click="ctrlBlack()">{{isBlack?'取消屏蔽':'屏蔽'}}</span>
						</li>
					</ul>
				</li>
				<li v-if='my'>
					<div class="attention">
						<div @click="goLink({path:'attention',query:{type:0}})">
							<span>{{myInfo.AttentionCount}}</span>
							<span class="smallText">关注</span>
						</div>
						<div @click="goLink({path:'attention',query:{type:2}})">
							<span>{{myInfo.FansCount}}</span>
							<span class="smallText">粉丝</span>
						</div>
					</div>
				</li>
			</ul>
			<div class="information_father">
				<ul class="information one">
					<li>个性签名</li>
					<li class="sexName">
						{{myInfo.Person.SelfSignature?myInfo.Person.SelfSignature:'个性签名，很个性...'}}
					</li>
				</ul> 
				<ul v-if='my' class="information">
					<router-link to="/myApptExpert">
            <li>
              <span>我约的行家</span>
              <i class="my_message_icon"></i>
            </li>
          </router-link>
          <router-link to="/buyContent">
            <li>
              <span>购买的内容</span>
              <i class="Purchased_icon"></i>
            </li>
          </router-link>
          <router-link to="/myQuestion">
            <li>
              <span>发布的问题</span>
              <i class="experience_icon"></i>
            </li>
          </router-link>
          <router-link to="/becomeExpert">
            <li>
              <span>成为行家</span>
              <i class="system_set_icon"></i>
            </li>
          </router-link>
				</ul>
				<ul v-if='my' class="information">
					<li>
						<span>实名认证</span>
						<i class="attestation_icon"></i>
					</li>
				</ul>
				<ul class="lable">
					<li>
						<span>{{my?'我':'他'}}的标签</span>
					</li>
					<li class="label-list">
						<div class="lables" id="changeLable" @click="toParsonLabel">
							<i class="color_lable" :class="arrColor[getNumber()]" v-if="myInfo.ShowTally" v-for="tab in myInfo.ShowTally">{{tab.Tally}}</i>
              <i class="color_lable" v-if="my && myInfo.ShowTally.length==0">暂无标签</i>
              <i class="color_lable bgcolor" @click="showAddEleWrap()" v-if="!my">+添加标签</i>
						</div>
            <span></span>
					</li>
				</ul>
				<ul class="information one margin_b0">
					<li v-if='my' class="enshrine" @click="goLink('/collect')">
						<span>收藏</span>
						<i class="attention_icon collect_icon"></i>
					</li>
				</ul>
        <ul class="information one">
					<router-link :to="{path:'share'}" tag='li' v-if='my' class="enshrine">
						<span>分享</span>
						<i class="attention_icon share_icon"></i>
					</router-link>
				</ul>
				<ul v-if='my' class="information">
					<li @click="goLink({path:'/AddressList',query:{type:2}})">
						<span>黑名单</span>
						<i class="blacklist_icon"></i>
					</li>
				</ul>
				<ul  v-if='!my&&myInfo.Share' class="information he_issue">
					<li>
						<span>他发布的</span>
						<i class="he_publish_icon"></i>
					</li>
					<li>
						<ul ref="move">
							<li v-for="item in myInfo.Share" @click="goOtherWeb(item)"><img :src="item.ShareImgUrl"></li>
						</ul>
					</li>
				</ul>
			</div>
		</section>
    <v-shade :sshow="addEleWrap.show" :judge='addEleWrap.judge'  @hide="hideAddEleWrap"></v-shade>
	</section>
</template>

<script>
//import head_er from '@/components/header'
//import label_module from '@/components/lable/lable_module'
import { checkStatus } from "../assets/js/login";
import { axiosPost } from "../assets/api";
import Chat from "../assets/js/chat";
import {Toast,Swipe, SwipeItem} from 'mint-ui';
import shade from '@/components/base/shade';
/*-------------
	my:判断是他人查看=2；个人中心还是自己查看=1；
	fans：粉丝数量数据
	attention：关注数量数据
	tabs：标签数据
	watchful：关注数量数据
	lables:头部标签
	--------------*/
export default {
  data() {
    return {
      toId: this.$route.query.to, //被查看着ID
      my: null, //自己看到的 false别人看到的
      myInfo: { Person: {}, ShowTally: [] }, //我的个人信息
      icon1: require("../assets/img/person/icon_wei01@3x.png"),
      isBlack:null,
      arrColor: ["pink", "purple", "green", "yellow"],
      icon2: require("../assets/img/person/icon_gear@3x.png"),
      defaultHead:  require("../assets/img/person/1.png"),
      addEleWrap:{
        show: false,
        judge: 7,
      },
      XHRData: {
        content: '',
      },
      
    };
  },
  components: {
    'v-shade':shade,'mtSwipe':Swipe,'mtSwipeItem':SwipeItem
  },
  created() {
    checkStatus(loginInfo => {
      this.loginInfo = loginInfo;
      if (!this.toId || this.toId == this.loginInfo.identifier) {
        this.my = true;
        this.getMyInfo();
      } else {
        this.my = false;
        this.getOtherInfo();
        this.getMyBlack();
      }
    });
  },
  mounted() {
    
  },
  methods: {
    back() {
      history.back();
    },
    showAddEleWrap(){
      this.addEleWrap.show = true;
    },
    getNumber(){
      return Math.round(Math.random()*3);
    },
    hideAddEleWrap(data){
        // 关闭添加个人标签的层
        this.addEleWrap.show = false;
        this.XHRData.content = data;
        console.log("提交数据", this.XHRData)
        if(data) this.addEle();
      },
    addEle(){
      axiosPost({
        url: 'TerminalUserTally/AddFromUserTally?token=xxxxx&appsecret=XXXXX',
        data: {
          ...this.loginInfo.checkLogin,
          "Identifier": this.loginInfo.identifier,
          "Sig": this.loginInfo.userSig,
          "ToIdentifier": this.toId,
          "Tally": this.XHRData.content
        },
        onSuccess: res => {
          Toast("给他(她)添加标签成功");
        },
        onFailure: err => {
          console.log(err);

        }
      })
    },
    toParsonLabel(){
      if(this.my){
        this.$router.push({path: '/parsonLabel'});
      }else{

      }
    },
    toFocus() {
      Chat.changeFocus(this.loginInfo,this.toId,1).then( res=> {
        this.myInfo.Type = 1;
        Toast('关注成功');
      }).catch( err=> {
        Toast('关注失败');
      });
    },
    cancelFocus(){
      Chat.changeFocus(this.loginInfo,this.toId,3).then( res=> {
        this.myInfo.Type = 3;
        Toast('取消关注成功');
      }).catch( err=> {
        Toast('取消关注失败');
      });
    },
    goSession(obj) {
      if (this.my) {
        this.$router.push("/recentContact");
      } else {
        this.$router.push({
          path: "/session",
          query: { id: this.toId, selType: "C2C" }
        });
      }
    },
    goLink(obj) {
      this.$router.push(obj);
    },
    goOtherWeb(item){
      console.log('items',item);
      location.href = item.ShareUrl;
    },
    getMyInfo() {
      axiosPost({
        data: {
          ...this.loginInfo.checkLogin,
          Identifier: this.loginInfo.identifier
        },
        url: "TerminalPersonal/GetMyUserVeiw?token=xxxxx&appsecret=XXXXX",
        onSuccess: res => {
          let userInfo = res.Result.Users;
          //userInfo.Person.HeadUrl = '';
          if(userInfo.Person.HeadUrl){
              //假数据
              //userInfo.Person.HeadUrl = 'http://pictest-1255370891.file.myqcloud.com/5644809082273245457.jpg,http://pictest-1255370891.file.myqcloud.com/head/5590702854565133673.jpg';
              let headers = userInfo.Person.HeadUrl;
              userInfo.Person.HeadUrl = headers.split(',');         
          }
          this.myInfo = userInfo;
          console.log("this.myInfo",this.myInfo);
        },
        onFailure: err => {}
      });
    },
    getOtherInfo() {
      axiosPost({
        data: {
          ...this.loginInfo.checkLogin,
          Identifier: this.loginInfo.identifier,
          ToIdentifier: this.toId
        },
        url: "TerminalPersonal/GetUserView?token=xxxxx&appsecret=XXXXX",
        onSuccess: res => {
          let userInfo = res.Result.Users;
          //userInfo.Person.HeadUrl = '';
          if(userInfo.Person.HeadUrl){
              //假数据
              //userInfo.Person.HeadUrl = 'http://pictest-1255370891.file.myqcloud.com/5644809082273245457.jpg,http://pictest-1255370891.file.myqcloud.com/head/5590702854565133673.jpg';
              let headers = userInfo.Person.HeadUrl;
              userInfo.Person.HeadUrl = headers.split(',');         
          }
          this.myInfo = userInfo;
          console.log("getOtherInfo", this.myInfo);
        },
        onFailure: err => {}
      });
    },
    getMyBlack(){
      Chat.getBlackList(this.loginInfo.identifier).then(res=>{
        console.log('res',res);
        this.isBlack = false;
        if(res.length>0){
          res.forEach(ele=> {
            if(this.toId == ele){
              this.isBlack = true;
            }
          });
          this.myBlack = res;
        }
      });
    },
    ctrlBlack(){
      let iden = this.loginInfo.identifier;
      if(!this.isBlack){
        Chat.addBlack(iden,this.toId).then(res=>{
          this.isBlack = true;
          Toast('屏蔽成功');
        }).catch(err=>{
          Toast('屏蔽失败');
        });
      }else{
        Chat.deleteBlack(iden,this.toId).then(res=>{
          this.isBlack = false;
          Toast('已取消屏蔽');
        }).catch(err=>{
          Toast('取消屏蔽失败');
        });
      }
    }
  }
};
</script>
<style lang="less" scoped>
@import '../assets/style/terminal';
@color_1: #4a4a4a;
@color_2: #ffffff;
@color_3: #fff;

.header {
  position: relative;
  z-index: 21;
}
.main {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding-top: .5rem;
  position: absolute;
  box-sizing: border-box;
  top: 0;
  left: 0;
}
.bgcolor{
  background: #6E6E6E!important;
}
.iocn2 {
  background: url("../assets/img/person/icon_up01@3x.png") no-repeat center;
  background-size: 0.18rem 0.18rem;
}
.my_message_icon {
  background: url("../assets/img/person/icon_man@3x.png") no-repeat center;
}
.Purchased_icon {
  background: url("../assets/img/person/icon_shop@3x.png") no-repeat center;
}
.experience_icon {
  background: url("../assets/img/person/icon_word@3x.png") no-repeat center;
}
.system_set_icon {
  background: url("../assets/img/person/icon_gear05@3x.png") no-repeat center;
}
.attestation_icon {
  background: url("../assets/img/person/icon_renz@3x.png") no-repeat center;
}
.margin_b0 {
  margin-bottom: 0!important;
}
.information {
  li {
    &.sexName{
      color: #888;
    }
    .collect_icon {
      background: url("../assets/img/person/icon_hont05@3x.png") no-repeat center;
      background-size: 0.2rem 0.2rem;
    }
    line-height: 0.45rem;
    margin: 0 0.15rem;
    border-bottom: 1px solid #ddd;
    font-size: 0.16rem;
    position: relative;
    i {
      width: 0.22rem;
      height: 0.22rem;
      display: inline-block;
      position: absolute;
      right: 0;
      top: 0.14rem;
      background-size: contain;
      img {
        width: 100%;
        height: 100%;
      }
    }
    &:last-of-type {
      border: 0;
      margin-bottom: 0.1rem;
    }
  }
  margin-bottom: 0.1rem;
  width: 100%;
  background: #fff;
  &:last-of-type {
    margin-bottom: 0.22rem;
  }
  span {
    display: inline-block;
    color: #333333;
    height: 0.45rem;
    font-size: .16rem;
  }
  .label2 {
    padding: 0.09rem 0.224rem;
    font-size: 0.2rem;
    background: red;
    border-radius: 4px;
    font-style: normal;
    color: @color_3;
  }
}
.share_icon {
  background: url("../assets/img/person/icon_share06@3x.png") no-repeat center;
}
.he_publish_icon {
  background: url("../assets/img/person/icon_shape@3x.png") no-repeat center;
}
.blacklist_icon {
  background: url("../assets/img/person/icon_shape@3x.png") no-repeat center;
}

.portrait {
  position: relative;
  width:100%;
  height:3.75rem;
  .swiper-list{
    background-size: cover !important;
  }
  .default-pic{
    width:100%;
    height:100%;
    background-size: cover !important;
  }
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
  i {
    display: block;
    width: 0.25rem;
    height: 0.25rem;
    position: absolute;
    z-index: 20;
    top: 0.1rem;
    background: #fff;
    border-radius: 50%;
    &:nth-of-type(1) {
      left: 0.15rem;
    }
    &:last-of-type {
      right: 0.15rem;
    }
  }
}
.introduce {
  background: #fff;
  padding: 0 0.15rem;
  position: relative;
  > li {
    width: 100%;
    position: relative;
    height: 0.7rem;
    &:nth-of-type(1) {
      border-bottom: 1px solid #ddd;
      height: 0.61rem;
    }
    &:last-of-type {
      border: 0;
    }
    > ul {
      position: absolute;
      top: 0.07rem;
      width: 100%;
      > li {
        padding-top: 0.02rem;
        &:nth-of-type(1) {
          color: @color_1;
          padding-bottom: 0.04rem;
          span {
            &:nth-of-type(1) {
              font-size: 0.14rem;
              font-weight: bold;
            }
          }
        }
        &:nth-of-type(2) {
          span {
            &.sex {
              background: #7DBDD8;
            }
            &.location{
              background: #ff9b79;
            }
          }
        }
      }
    }
  }
}
.shield {
  position: absolute;
  top: 0.1rem;
  right: 0rem;
  width: 1.8rem;
  span {
    float: right;
    border-radius: 0.08rem;
    padding: 0rem 0.16rem;
    display: block;
    height: 0.2rem;
    line-height: 0.2rem;
    background: #4a4a4a;
    &.focus {
      margin-left: 0.1rem;
      padding: 0rem 0.08rem;
      background: #ff6969;
    }
  }
}
.top_label {
  display: inline-block;
  background: #7dbdd8;
  font-size: 0.12rem;
  padding: 0.015rem 0.12rem;
  border-radius: 4px;
  color: @color_2;
  margin-right: 0.04rem;
}
.attention {
  width: 100%;
  height: 80%;
  margin: 0.1rem 0 0;
  display: flex;
  div {
    flex: 1;
    &:nth-of-type(1) {
      border-right: 1px solid #ccc;
    }
    span {
      &.smallText {
        color:#888;
      }
      &:nth-of-type(1) {
        font-size: 0.24rem;
        font-weight: bold;
      }
      &:nth-of-type(2) {
        font-size: 0.14rem;
      }
    }
  }
  span {
    width: 100%;
    height: 48%;
    display: block;
    float: left;
    text-align: center;
    line-height: 0.32rem;
  }
}
.one {
  li {
    &:nth-of-type(1) {
      background: #f5f5f5;
      margin: 0rem;
      padding: 0 0.15rem;
      height: 0.45rem;
      line-height: 0.46rem;
      font-size: 0.14rem;
      color: #b1b1b1;
    }
  }
  &:nth-of-type(1) {
    span {
      width: 1rem;
    }
    li {
      &:nth-of-type(2) {
        height: 0.94rem;
        textarea {
          width: 100%;
          height: 80%;
          margin-top: 0.1rem;
          border: 0;
          outline: none;
          resize: none;
        }
      }
    }
  }
}
.information_father {
  .one {
    .enshrine {
      background: #fff;
      margin-right: 0.15rem;
      margin-left: 0.15rem;
      padding: 0;
      border-top: 1px solid #e5e5e5;
    }
  }
}
.he_issue {
  height: 1.71rem;
  overflow: hidden;
  > li {
    > ul {
      min-width: 5.45rem;
      > li {
        width: 1.05rem;
        height: 1.05rem;
        margin: 0.1rem 0;
        margin-right: 0.1rem;
        float: left;
        img {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
    }
  }
}
.lable {
  li {
    &:nth-of-type(1) {
      height: 0.3rem;
      line-height: 0.3rem;
      padding: 0 0.15rem;
      font-size: 0.14rem;
      color: #b1b1b1;
    }
    &:nth-of-type(2) {
      background: #fff;
      padding: 0 0.15rem;
      position: relative;
    }
  }
  .label-list{
    display: flex;
    align-items: center;
    .lables{
      flex:1;
    }
    span{
      display: block;
      width:.22rem;
      height:.22rem;
      //background: url("../../assets/img/person/icon_shape@3x.png") no-repeat center;
      background-size: contain;
    }
  }
}
.lables {
  padding: 0.1rem 0 0;
   i {
    display: inline-block;
    padding: 0rem 0.09rem;
    height: 0.25rem;
    line-height: 0.28rem;
    font-style: normal;
    font-size: 0.14rem;
    border-radius: 0.05rem;
    margin-bottom: 0.1rem;
    margin-right: 0.1rem;
  }
  .pink {
    background: #EFABAB!important;
    color: #9B3131!important;
  }
  .purple {
    background: #A8AED4!important;
    color: #2667B2!important;
  }
  .green {
    background: #AEE0C7!important;
    color: #1C7505!important;
  }
  .yellow {
    background: #FCE5BA!important;
    color: #C79141!important;
  }
}

.lable_icon {
  position: absolute;
  right: 0.18rem;
  top: 21%;
  background: url("../assets/img/person/icon_shape@3x.png") no-repeat center;
  background-size: 0.18rem 0.18rem;
}
</style>